<div id="top-left">
  <span class="location-title">工单</span>
</div>
<div class="main-content">
  <ul nz-menu nzMode="horizontal" class="location-menu">
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/work/order']">
      工单查询
    </li>
    <li nz-menu-item nzMatchRouter [routerLink]="['/main/work/submit']">
      提交工单
    </li>
  </ul>
  <nz-table #headerTable [nzData]="datalist" [nzTotal]="totalCount" [(nzPageIndex)]="selectData.pageindex"
    [(nzPageSize)]="selectData.pagesize" [nzShowSizeChanger]="true" [nzPageSizeOptions]="[10, 15, 20]"
    [nzLoading]="isLoading" [nzBordered]="false" [nzFrontPagination]="false" (nzPageIndexChange)="getlist()"
    (nzPageSizeChange)="getlist()">
    <thead>
      <tr>
        <th nzAlign="center" nzWidth="60px">序号</th>
        <th nzAlign="left">问题内容</th>
        <th nzAlign="center" nzWidth="100px">优先级</th>
        <th nzAlign="center" nzWidth="150px">提交时间</th>
        <th nzAlign="center" nzWidth="100px">状态</th>
        <th nzAlign="center" nzWidth="120px">操作</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let item of headerTable.data; let no = index;" (dblclick)="check(no)">
        <td nzAlign="center">{{(selectData.pageindex - 1) * selectData.pagesize + no + 1}}</td>
        <td nzAlign="left">{{item['content']}}</td>
        <td nzAlign="center">{{urgentText[item['urgent']]}}</td>
        <td nzAlign="center">{{item['date'] | date:'yyyy-MM-dd HH:mm'}}</td>
        <td nzAlign="center">{{statusText[item['status']]}}</td>
        <td nzAlign="center">
          <a (click)="check(no)"><i nz-icon nzType="eye" nzTheme="outline"></i></a>
          <nz-divider nzType="vertical"></nz-divider>
          <a (click)="delete(item['id'])"><i nz-icon nzType="delete" nzTheme="outline"></i></a>
        </td>
      </tr>
    </tbody>
  </nz-table>
  <nz-modal nzWrapClassName="vertical-center-modal" [(nzVisible)]="isDetailShow" (nzOnCancel)="close()"
    [nzMaskClosable]="false" nzWidth="800" nzTitle="工单预览" [nzFooter]="null">
    <div class="detail-show">
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">工单ID</div>
        <div nz-col nzSpan="18">{{data['id']}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">优先级</div>
        <div nz-col nzSpan="18">{{urgentText[data['urgent']]}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">联系信息</div>
        <div nz-col nzSpan="18">{{data['phone']}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">问题描述</div>
        <div nz-col nzSpan="18">{{data['content']}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">问题截图</div>
        <div nz-col nzSpan="18">
          <app-image-view [data]="data['imageList']"></app-image-view>
        </div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">提交时间</div>
        <div nz-col nzSpan="18">{{data['date'] | date:'yyyy-MM-dd HH:mm'}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">工单回复</div>
        <div nz-col nzSpan="18">{{data['reply']}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">回复时间</div>
        <div nz-col nzSpan="18">{{data['replyDate'] | date:'yyyy-MM-dd HH:mm'}}</div>
      </div>
      <div nz-row [nzGutter]="16">
        <div nz-col nzSpan="6">状态</div>
        <div nz-col nzSpan="18">{{statusText[data['status']]}}</div>
      </div>
    </div>
  </nz-modal>
</div>
